<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app1" style="border: 1px solid black;">
        <h3>这里是app1的作用域</h3>
        <my_component></my_component>
    </div>
    <div id="app2" style="border: 1px solid black;">
        <h3>这里是app2的作用域</h3>
        <my_component></my_component>
    </div>
    <!-- 注意外部模版内容需要用template标签包裹 -->
    <template id="template1">
        <button @click="addCount">全局组件，被点击次数是{{count}}</button>
    </template>
    <script src="js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        //注册全局组件
        Vue.component('Mycomponent',{
            //注意：template使用的是模版字符串，可以换行
            template:`<button @click='addCount'>
                    全局组件，被点击次数是{{count}}
                    </button>`,
                    //注意：组件的data必须是函数，数据是独立的，不会互相影响
                    data() {
                        return {
                            count:0
                        }
                    },
                    methods: {
                        addCount(){
                            this.count++;
                        }
                    },
        });
        //创建Vue实例app1
        const app1 = new Vue({
            el:'#app1',
            components:{
                //局部组件，组件名为my-compoent
                "my_component":{
                    //通过选择器指向组件的模版
                    template:`#template1`,
                    //注意：组件的data必须是函数，数据是独立的，不会互相影响
                    data(){
                        return{
                            count:0
                        }
                    },
                    methods:{
                        addCount(){
                            this.count++;
                        }
                    }
                }
            }
        });

        //创建Vue实例app2
        const app2 = new Vue({
            el:'#app2'
        });
    </script>
</body>
</html>